<template>
 <h1>
      循环指令
 </h1>

  <table>
    <tr>
      <th>编号</th>
      <th>名称</th>
      <th>价格</th>
      <th>库存</th>
      <th>操作</th>
    </tr>
    <tr v-for="(pro,index) in proArr">
      <td>{{index+1}}</td>
      <td>{{pro.title}}</td>
      <td>{{pro.price}}</td>
      <td>{{pro.stock}}</td>
      <td><buttton @click="del(index)">删初</buttton></td>
    </tr>

  </table>

</template>
<script setup>
import {ref} from "vue";
  const proArr = ref([
    {title:'华为手机',price:5000,stock:100},
    {title:'华为手机1',price:50001,stock:1001},
    {title:'华为手机2',price:50002,stock:1002},
    {title:'华为手机3',price:50003,stock:1003}
  ]);

  const del = (index)=>
  {
    proArr.value.splice(index,1);
  }

</script>


<style scoped>

</style>